<template>
    <!-- 导航栏 -->
    <van-nav-bar :title="title" left-arrow @click-left="back" @click-right="ShowShare=true" fixed>
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
    </van-nav-bar>

    <!-- 分享面板 -->
    <van-share-sheet v-model:show="ShowShare" title="立即分享给好友" :options="options" @select="share" />

    <!-- 轮播图 -->
    <div class="aui-m-slider">
        <van-swipe lazy-render>
            <van-swipe-item v-for="(item,index) in product.thumbs_cdn" :key="item" class="van">
                <img :src="item" class="img" />
            </van-swipe-item>
        </van-swipe>
    </div>

    <!-- 商品详情 -->
    <div class="detailbox">
        <h4>{{product.name}}</h4>
        <!-- 价格 -->
        <div class="price" v-if="product.level">
            <em>￥</em>{{product.level}}
            <span>￥{{product.price}}</span>
            <div class="stock">库存：{{product.stock}}件</div>
        </div>
        <div class="price" v-else></div>
        <em>￥</em>{{product.price}}
        <div class="stock">库存：{{product.stock}}件</div>
    </div>
    <div class="clear"></div>
    <div class="allkbox"></div>

    <!-- 详细内容 -->
    <van-tabs v-model:active="tabs">
        <van-tab title="产品参数">
            <div class="detailbox_2">
                <p class="tit">产品参数：</p>
                <div v-html="product.content"></div>
            </div>
        </van-tab>
        <van-tab title="商品评论">
            <div class="gwcbox">
                <div class="gwclist">
                    <div class="shop-cart-listbox1">
                        <div class="shop-cart-box2">
                            <span class="shop-cart-ltext1">店铺评论平均分：{{fen}}分</span>
                            <van-rate v-model="fen" readonly allow-half />
                        </div>


                        <div class="index-goods" v-for="(item,index) in comment">
                            <van-card :price="item.nickname" :title="item.name" :price-top="13" :desc="item.remark"
                                :thumb="url+item.thumbs" currency="">
                                <template #footer>
                                    <div>评论分数：{{item.rate}}分
                                        <van-rate v-model="item.rate" readonly allow-half />
                                    </div>
                                </template>
                            </van-card>
                        </div>
                    </div>
                </div>
            </div>
        </van-tab>
    </van-tabs>

    <div class="clear"></div>
    <div class="h54"></div>

    <!-- 下方的动作栏 -->
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" dot @click="Call" />
        <van-action-bar-icon v-if="total > 0" icon="cart-o" text="购物车" :badge="total" @click="ToCart" />
        <van-action-bar-icon v-else icon="cart-o" dot text="购物车" @click="ToCart" />
        <van-action-bar-button type="warning" text="加入购物车" @click="AddCart" />
        <van-action-bar-button type="danger" text="立即购买" @click="buy" />
    </van-action-bar>

</template>

<script>
    export default {
        name: "ProductInfo",
        created() {
            this.proid = this.$route.query ? this.$route.query.proid : 0
            this.ProductData()
        },
        data() {
            return {
                rate: 3.3,      // 评论星数
                remark: "",
                cartids:[],
                comment: [],     //商品评论
                proid: 0,       //商品id
                url: '',         //图片前缀
                product: {},    //商品的数据
                title: '',       //店铺标题
                tabs: 0,        //详细内容
                total: 0,       //购物车的数量
                ShowShare: false,   //分享面板的隐藏属性
                LoginUser: this.$cookies.get('LoginUser'),
                contact: '',        //客服电话
                options: [          //分享面板
                    [
                        { name: '微信', icon: 'wechat' },
                        { name: '朋友圈', icon: 'wechat-moments' },
                        { name: '微博', icon: 'weibo' },
                        { name: 'QQ', icon: 'qq' },
                    ],
                    [
                        { name: '复制链接', icon: 'link' },
                        { name: '分享海报', icon: 'poster' },
                        { name: '二维码', icon: 'qrcode' },
                        { name: '小程序码', icon: 'weapp-qrcode' },
                    ]
                ]

            }
        },

        methods: {
            back() {
                this.$router.go(-1)
            },
            // 分享的方法
            share(option) {
                this.ShowShare = false
            },
            // 拨打客服电话
            Call() {
                this.$dialog.confirm({
                    title: "拨打电话 ",
                    message: "是否确认拨打官方客服电话热线"
                }).then(() => {
                    location.href = `tel:${this.contact}`
                    return
                }).catch(() => { })
            },
            // 跳转到购物车
            ToCart() {
                this.$router.push('/product/cart/index')
            },

            //查询商品详细
            async ProductData() {
                // 组装数据
                var data = {
                    proid: this.proid,
                }
                // console.log(data);

                if (this.LoginUser && JSON.stringify(this.LoginUser) != "{}") {
                    data.userid = this.LoginUser.id
                }

                var result = await this.$api.ProductInfo(data)
                console.log(result.data);

                if (result.code == 0) {
                    this.$notify({
                        type: "danger",
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {
                            this.$router.go(-1);
                        }
                    })
                    return false
                }

                this.product = result.data.product
                this.contact = result.data.contact
                this.title = result.data.title
                this.total = result.data.total
                this.comment = result.data.comment
                this.url = result.data.url
                this.fen = result.data.fen
                console.log(this.comment)
            },

            // 添加到购物车
            async AddCart() {
                console.log(123456);
                if (!this.LoginUser || JSON.stringify(this.LoginUser) == "{}") {
                    // 提示信息
                    this.$notify({

                        type: "danger",
                        message: "请先登录",
                        duration: 1000,
                        onClose: () => {
                            this.$router.push('/user/base/login');
                            return false;
                        }
                    })
                    return false
                }

                // 组装数据
                var data = {
                    proid: this.proid,
                    userid: this.LoginUser.id,
                    nums: 1
                }

                var result = await this.$api.CartAdd(data)

                if (result.code == 1) {
                    // 更新购物车数量
                    this.ProductData()
                    this.$dialog.confirm({
                        message: result.msg,
                    }).then(
                        async () => {
                            this.$touter.push(result.url)
                        }
                    ).catch(() => { });
                } else {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })

                    return false
                }
            },

            // 立即购买
            async buy() {
                this.$dialog.confirm({
                    title: "立即购买 ",
                    message: "是否确认立即"
                }).then(async () => {
                    if (!this.LoginUser || JSON.stringify(this.LoginUser) == "{}") {
                        // 提示信息
                        this.$notify({

                            type: "danger",
                            message: "请先登录",
                            duration: 1000,
                            onClose: () => {
                                this.$router.push('/user/base/login');
                                return false;
                            }
                        })
                        return false
                    }

                    // 组装数据
                    var data = {
                        proid: this.proid,
                        userid: this.LoginUser.id,
                        nums: 1
                    }

                    var result = await this.$api.CartAdds(data)
                    this.cartids=result.data

                    if (result.code == 1) {
                        // 更新购物车数量
                        this.ProductData()

                        // 查询最近一次的购物车记录

                        // 跳转到下单界面
                        this.$router.push({
                            path: '/product/cart/confirm',
                            query: {
                                cartids: this.cartids
                            }
                        })
                    }
                    return
                }).catch(() => { })

            }
        }
    }
</script>
<style>
    .headerbox .header {
        z-index: 1;
    }

    .detailbox h4 {
        font-size: 18px;
    }

    .detailbox .price {
        font-size: 16px;
    }

    .price .stock {
        float: right;
        color: #b7b7bf;
        font-size: 12px;
    }

    .index-goods-textbox {
        margin-left: 112px;
    }

    .priceJs {
        font-size: 12px;
    }

    .van .img {
        height: 303px;
    }
</style>